<template>
  <CommBG>
    <div class="login_contet pos_absolute flex_header_main">
      <div class="login_title flex_header">
        <div class="login_header">登 录</div>
        <div class="login_dis">AIGC培训管理中心</div>
      </div>
      <div class="login_form wrapper">
        <van-form @submit="onSubmit">
          <div class="form_row" vo>
            <van-field v-model="formData.name" placeholder="请输入用户名" :rules="[{ required: true, message: '请填写用户名' }]">
              <template #label><span class="form_label">姓名</span></template>
            </van-field>
          </div>
          <div class="form_row">
            <van-field v-model="formData.pwd" placeholder="请输入用户名" :rules="[{ required: true, message: '请填写用户名' }]">
              <template #label><span class="form_label">手机号</span></template>
            </van-field>
          </div>
          <div style="margin: 16px">
            <van-button block type="primary" native-type="submit" color="#4548F4"> 提交 </van-button>
          </div>
        </van-form>
      </div>
    </div>
  </CommBG>
</template>

<script lang="ts" setup name="LoginPage">
  import CommBG from '@/components/bg/CommBG.vue'
  import { reactive, ref } from 'vue'
  import useUserStore from '@/store/modules/user'
  import { useRouter } from 'vue-router'
  import sysMsg from '@/utils/sysMsg'

  const router = useRouter()
  const userStore = useUserStore()
  const formData = reactive<any>({
    form: {
      name: '',
      pwd: '',
    },
  })
  const ruleForm = ref<any>(null)
  const onSubmit = () => {
    console.log(router)
    sysMsg.successMsg('点击登录')
    ruleForm.value.validate().then(async ({ valid, errors }: any) => {
      if (valid) {
        await userStore.loginCloud({ userName: '', passWord: '' })
      } else {
        console.log('error submit!!', errors)
      }
    })
  }
</script>

<style scoped lang="less">
  .login_contet {
    .login_title {
      font-weight: 500;
      margin: 214px 50px 50px 70px;
      .login_header {
        font-size: 96px;
        color: #ffffff;
        margin-bottom: 22px;
      }
      .login_dis {
        font-size: 48px;
        color: #ffffff;
      }
    }
    .login_form {
      background: #ffffff;
      border-radius: 40px;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      margin: 0 30px;
      .form_row {
        border-bottom: 4px solid #4548f4;
        margin-bottom: 50px;
      }
      .form_label {
        font-size: 36px;
        color: #4548f4;
      }
    }
  }
  :deep(.van-field) {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 1%;
  }
</style>
